.page-container {
    /*max-width: 1280px;*/
    margin: 0;
    /*background:;*/
    border-radius: 2px;
    /*box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);*/
    /*padding: 1.8rem 2rem;*/
}
.page_title{
    font-size: 1.7rem;
    font-weight: 900;
    /*color: #155e7b;*/
    padding: 0.7rem 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;

}

.panel-info {
    /*background: #e8f4fd;*/
    border: 1px solid #b8d9f7;
    border-right: 4px solid #2196f3;
    border-radius: 2px;
    padding: 1.5rem;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03), 0 0 0 1px #eff3f8;
}
.panel-attention  {
    /*background: #fff8e1;*/
    border: 1px solid #ffecb3;
    border-right: 4px solid #ff9800;
    color: #b76e00;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 10px;
    /*box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03), 0 0 0 1px #eff3f8;*/
}
.panel-success  {
    /*background: #f0fdf4;*/
    border: 1px solid #ffecb3;
    border-right: 4px solid #3b82f6;
    color: #3d5675;
    border-radius: 2px;
    padding: 1.5rem;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03), 0 0 0 1px #eff3f8;
}
/*################################### --------------- ###############*/

article.main-article {
    /*margin: 3rem 1.5rem 1.5rem 1.5rem;  !* top right bottom left *!*/
    /*background: #fefefe;*/
    border-radius:0;

}

/* سطح دوم: هر زیربخش اصلی (مفهوم، نحوه تعریف، بررسی اطلاعات و ...) */
.main-section {
    /*background: #ffffff;*/
    line-height: 2rem;
    /*border-radius: 1.2rem;*/
    padding: 0.1rem 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
.main-section h3.section-title {
    font-size: 1.57rem;
    font-weight: 600;
    color: #103549;
    /*padding-right: 1rem;*/
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
    /*border-right: 4px solid #64b5c0;*/
    display: inline-block;
    padding-left: 1rem;
}
.main-section p{
    padding-bottom: .1rem;
    margin-bottom: .2rem;
    text-align:justify  ;

}

/* سطح سوم : جزییات، کارت‌های توضیحی */
.detail-card {
    /*background: #f9fbfd;*/
    font-size: 1rem;
    line-height: 2rem;
    border-radius: 1.1rem;
    margin: .2rem 0;
    /*border: 1px solid #e5edf2;*/
    transition: all 0.2s;
    text-align:justify  ;
    padding-left: 1rem;
}
.detail-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #286b8c;
    margin-bottom: 0.9rem !important;
    margin-top: 0.7rem !important;
}
.detail-card p {
    /*text-align:justify  ;*/
}
/* استایل ویژه برای «آیتم‌های آدرس‌گونه» مثل مسیر منوها، نام آیتم‌ها، کلیدهای نرم‌افزاری */
.address-item {
    direction: ltr;  /* برای نمایش بهتر مسیرها که معمولاً ترکیبی از متن فارسی/اعداد است */
    unicode-bidi: embed;
    /*background: #eef3f7;*/
    font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    /*border-radius: 1rem;*/
    display: inline-block;
    color: #0f5b6e;
    /*border: 1px solid #cbdde6;*/
    margin: 0 0.1rem;
    letter-spacing: 0.2px;
}

/* برای مواردی که در متن عادی ظاهر می‌شوند و نیاز به هایلایت مسیر دارند */
.inline-code {
    /*background: #ecf3f8;*/
    font-family: monospace;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #0c4e6e;
    border: 1px solid #cbdde6;
    display: inline-block;
    white-space: nowrap;
}

/*########################## ---  orders list --------- #############*/
.ol-persian {
    list-style-type: arabic-indic;
    margin-top: 16px
}
.ol-persian li {
    box-shadow: #999 0 0 0 0;
    border-color: #000;
    /*font-family: yekanbakh,Arial;*/
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 1.1rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: #2b2b2b;
    text-align: right
}

/*########################## ---  image frames --------- #############*/
/*image frames*/
.image-frame{
    /*background: linear-gradient(145deg, #ffffff, #ffffff);*/
    border-radius: 14px;
    padding: 0.2rem ;
    text-align: center;
    margin: 0.2rem 0;
    border: 1px solid rgba(0,0,0,0.09);
    box-shadow: 0 6px 6px rgba(246, 244, 244, 0.02);

}
.image-frame  img {
    /*max-width: 100%;*/
    border-radius: 20px;
    display: inline-block;
    min-height: 180px;
    width: 100%; /* Make images_old responsive */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Prevent distortion */
    /*background: #f4f8fe; !* fallback while image loads *!*/
}

.menu-path{
    color: #f39c12;
}


 h2.article-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #155e7b;
    /*background: #f0f6fa;*/
    padding: 0.7rem 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    /*border-right: 5px solid #2c9baf;*/
}
/*########################## ---  colors  --------- #############*/
/* Color classes */
.blue-color {
    color: #0097e6;
}

.green-color {
  color: #4cae4c;
}
.orange-color {
    color: #f58a18
}

.red-color {
   color: #ed5565

}

.darkblue-color {
  color: #2d6da3;

}

.gray-color {
    color: #7f8c8d;
}

.white-color {
    color: #ffffff;
}

/* Additional useful colors */
.purple-color {
    color: #9b59b6;
}

.pink-color {
    color: #fd79a8;
}

.yellow-color {
    color: #f1c40f;
}

.teal-color {
    color: #1abc9c;
}

.brown-color {
    color: #8e44ad;
}

.lime-color {
    color: #badc58;
}

.cyan-color {
    color: #00cec9;
}

.indigo-color {
    color: #3c40c6;
}

.cranberry-color {
    color: #e84393;

}
.magenta-color {
  color: #de2ee8;
}

.silver-color {
    color: #bdc3c7;
}

.navy-color {
    color: #1e3799;
}

.olive-color {
    color: #7d3c98;
}

.coral-color {
    color: #ff7675;
}

.mint-color {
    color: #55efc4;
}

/*########################## ---  icons size s--------- #############*/
/** Base icon class for consistent sizing *!*/
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/*===================================  font size*/
strong
{
    font-size: 0.97rem !important;
}
/*=================================== Icons setting*/

.inline-icon {
    width: 30px;
    height: 30px;
    margin: 0 5px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;

    /*top: 5px;*/
}
/*==========================*/

/*########################## --- responsive layout --------- #############*/
.page-container,
.page-container *,
.page-container *::before,
.page-container *::after {
    box-sizing: border-box;
}

.page-container {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.page-container img,
.page-container video,
.page-container iframe {
    max-width: 100%;
}

@media (max-width: 991px) {
    .page-container {
        margin: 0 ;
        padding: 0;
    }

    article.main-article {
        margin: 0;
    }

    .main-section {
        margin-right: 0.75rem;
    }

    .panel-info,
    .panel-attention,
    .panel-success {
        padding: 1.2rem;
    }
}

@media (max-width: 767px) {
    .page-container {
        margin: 0;
        padding: 0;
        /*box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);*/
    }

    article.main-article {
        margin: 1.25rem 0 0;
    }

    .main-section {
        margin-right: 0;
        padding: 0.25rem 0;
    }

    .page_title,
    h2.article-title {
        width: 100%;
        padding: 0.65rem 1rem;
        font-size: 1.4rem;
        line-height: 1.7;
    }

    .main-section h3.section-title {
        display: block;
        padding-left: 0;
        font-size: 1.3rem;
        line-height: 1.7;
    }

    .detail-card-title {
        font-size: 1.12rem;
        line-height: 1.7;
    }

    .main-section p,
    .detail-card {
        text-align: right;
        font-size:1rem;
    }

    .detail-card {
        padding-left: 0;
    }

    .panel-info,
    .panel-attention,
    .panel-success {
        padding: 1rem;
    }

    .address-item,
    .inline-code {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .ol-persian {
        margin-right: 0;
        padding-right: 1.35rem;
    }

    .image-frame img {
        min-height: 0;
        height: auto;
        object-fit: contain;
    }
}

/*########################## ---  dark mode --------- #############*/

html.dark-mode .page-container {
    /*background: var(--bg-surface);*/
    /*box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);*/
}

html.dark-mode .panel-info {
    /*background: rgba(33, 150, 243, 0.12);*/
    border-color: rgba(33, 150, 243, 0.3);
}

html.dark-mode .panel-attention {
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.3);
    color: #ffb74d;
}

html.dark-mode .panel-success {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--text-secondary);
}

html.dark-mode article.main-article {
    /*background: var(--bg-surface);*/
}

html.dark-mode .main-section {
    background: transparent;
}

html.dark-mode .main-section h3.section-title {
    color: var(--text-heading);
}

html.dark-mode .detail-card-title {
    color: var(--text-link);
}

html.dark-mode .address-item {
    color: var(--text-link);
}

html.dark-mode .inline-code {
    background: var(--bg-tint-1);
    color: var(--text-link);
    border-color: var(--border-default);
}

html.dark-mode .ol-persian li {
    color: var(--text-secondary);
}

html.dark-mode .image-frame {
    background: var(--bg-surface);
    border-color: var(--border-default);
}

html.dark-mode h2.article-title {
    background: var(--bg-tint-1);
    color: var(--text-link);
}

html.dark-mode .navy-color {
    color: #5c7cd6;
}

html.dark-mode .darkblue-color {
    color: #6fa8dc;
}

@media (max-width: 479px) {
    .page-container {
        margin: 0;
        padding: 0;
        border-radius: 0;
        /*box-shadow: none;*/
    }

    .page_title,
    h2.article-title {
        margin-bottom: 1rem;
        padding: 0.55rem 0.75rem;
        font-size: 1.25rem;
    }

    .main-section h3.section-title {
        font-size: 1.18rem;
    }

    .panel-info,
    .panel-attention,
    .panel-success {
        padding: 0.8rem;
    }

    .inline-icon {
        width: 28px;
        height: 28px;
        margin: 0 3px;
    }
}